<template>
<div class="priview" :style="{minHeight: height+'px'}">
    <div class="priview-content" id="vippreviewcontent">
      <div id="vippreviewchild">
        <p style="font-size: 22px;text-align: center; margin: 0 0 0 -10px;">我的简历</p>
        <div class="d-flex justify-content-center align-items-center mt-3">
          <div style="width: 285px;">
            <img src="static/morentouxiang.png" alt="" width="110" height="110">
          </div>
          <div class="col px-0">
            <div class="d-flex align-items-end mb-3">
              <span style="font-size: 28px; color: #94C05A;font-weight: bold;min-width: 140px;">{{vitae.username}}</span>
              <span>{{vitae.workYear}}工作经验&nbsp;/&nbsp;{{getEducation(vitae.education)}}&nbsp;/&nbsp;{{getAge(vitae.birthday)}}岁</span>
            </div>
            <div class="d-flex">
              <span class="font-weight-bold" style="width: 140px;">{{vitae.phone}}</span>
              <span>{{vitae.email}}</span>
            </div>
          </div>
          
        </div>
        <div class="flex  priview-content-block pt-3 mt-3" style="border-top: 1px solid #deeacc;">
          <h4 class="my-3">基本信息</h4>
          <div class="flex-row">
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>所在城市</label>
                <span>{{vitae.city}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>生日</label>
                <span>{{$formatYMD(vitae.birthday)}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>期望薪资</label>
                <span>{{vitae.expectedSalary}}</span>
              </div>
            </div>
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>性别</label>
                <span>{{vitae.sex === 1 ? '男' : '女'}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>所学专业</label>
                <span>{{vitae.profession}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>毕业院校</label>
                <span>{{vitae.graduatedSchool}}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="flex  priview-content-block pt-3">
          <h4 class="my-3">自我介绍</h4>
          <p v-if="!vitae.selfIntroduction || vitae.selfIntroduction.length < 4">暂未填写填写自我介绍</p>
          <p v-html="$replaceEnter(vitae.selfIntroduction)"></p>
        </div>

        <div class="flex  priview-content-block pt-3">
          <h4 class="my-3">附件信息</h4>
          <P v-if="getAtt(vitae.attachment).length === 0">暂未上传附件</P>
          <ul class="el-upload-list el-upload-list--text">
            <li tabindex="0" class="el-upload-list__item is-success" 
                v-for="(file, index) in getAtt(vitae.attachment)" 
                :key="index">
              <a class="el-upload-list__item-name" target="_blank" 
                :href="getUrl(file.url, file.name)">
                <i class="el-icon-document"></i>
                {{file.name}}
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'vitaepreview',
  title: '简历预览',
  data() {
    return {
      vitae: {}
    }
  },
  mounted () {
    if (Object.keys(this.$route.query).length === 0) {
      this.initData()
    } else {
      this.vitae = Object.assign({}, this.vitae, this.$route.query)
    }
    
  },
  methods: {
    initData () {
      axios.post('/mscs/resume/findResumeSnapshot', this.$paramsConvert({snapshotId: this.$uncompileStr(this.$route.params.id)})).then(res => {
        if (res.data.code === 1) {
          this.vitae = Object.assign({}, this.vitae, res.data.data)
        } else {
          this.$codeError(res)
        }
      }).catch(error => {
        this.$catchError(error)
      })
    },
    getAtt (str) {
      if (str) {
        let files = JSON.parse(str)
        if (typeof files === 'string') {
          return this.getAtt(files)
        }
        return files
      }
      return []
    },
    getUrl (url, name) {
      if (!url || !name) {
        return
      }
      if (this.$isBrowserCan(name)) {
        return url
      }
      // 注意一下url不能换行
      return `http://mscs.e-tudou.com:10000/loleaflet/ffc419a/loleaflet.html?WOPISrc=http://mscs.e-tudou.com:10001/wopi/files/${name}&access_token=${url}`
    },
    getAge (birthday) {
      return new Date().getFullYear() - new Date(birthday).getFullYear()
    },
    getEducation (str) {
      let educationes = [
        {label: '博士', value: 'DOCTOR'},
        {label: '硕士', value: 'MASTER'},
        {label: '本科', value: 'BACHELOR'},
        {label: '大专', value: 'COLLEGE'},
        {label: '中技', value: 'TECHNICAL_SCHOOL'},
        {label: '中专', value: 'TECHNICAL_SECONDARY_SCHOOL'},
        {label: '高中以下', value: 'HIGH_SCHOOL'}
      ]
      for (let i = 0; i < educationes.length; i++) {
        if (str === educationes[i].value) {
          return educationes[i].label
        }
      }
    }
  },
  computed: {
    height () {
      let height = this.$store.state.height.client - this.$store.state.height.header - this.$store.state.height.footer
      return height
    }
  },
}
</script>
<style scoped>
  .priview {
    background: #F2F6EB;
    color: #666666;
    padding: 60px 0;
  }
  .priview-content {
    width: 800px;
    margin: auto;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 20px 65px;
    box-shadow: #cccccc 0px 0px 2px 2px;
  }
  .priview h2, .priview h3 {
    text-align: center;
  }
  .priview h4 {
    color: #94C05A;
    font-size: 18px;
  }
  .flex-row {
    display: flex;
  }
  .flex {
    display: flex;
    flex-direction: column;
  }
  .flexone {
    flex: 1;
  }
  /* .priview-label, .priview-label-one {
    margin-bottom: 20px;
  } */
  .priview-label label {
    width: 100px;
  }
  .priview-label span {
    flex: 1;
  }
  .priview-label-one label {
    width: 150px;
  }
  .priview-label-one span {
    flex: 1;
    line-height: 1.7;
  }
  .priview-content-block {
    margin-bottom: 20px;
  }
  .priview-content-block + .priview-content-block {
    border-top: 1px solid #deeacc;
  }
</style>
